import { Input, Radio } from 'antd';
import { useState } from 'react';
import FieldWrapper from '../FieldWrapper';
import Style from './index.module.less';

export const RadioInput = ({ label,hasRemark, value, onChange, onPressEnter }) => {
  const handleOnChange = (e) => {
    onChange?.({hasRemark, text:e.target.value});
  };

  const handleRadioChange = (val) => {
    if(val){
      const bool = val == 'true';
      onChange?.({hasRemark: hasRemark == bool ? null : bool, text: val == 'false' ? ''  : value });
    }
  };
  return (
    <div className={Style['wrap']}>
      <p className={Style['label']}>{label}</p>
      <div className={Style['radio-group']} onClick={e=>handleRadioChange(e.target.value)}>
        <Radio.Group value={hasRemark}>
          <Radio value={true}>有备注</Radio>
          <Radio value={false}>无备注</Radio>
        </Radio.Group>
      </div>
      <FieldWrapper>
        <Input disabled={!hasRemark} allowClear value={value} onChange={handleOnChange} placeholder="请输入留言备注" onPressEnter={onPressEnter} />
      </FieldWrapper>
    </div>
  );
};
